import React from 'react';
import classNames from 'classnames';
import filter from 'filter-anything';
import filterProps from 'react-valid-props';
import Icon from '../Icon';
import Label from './Label';
import Passwrod from './Password';
import Search from './Search';
import TextArea from './TextArea';
import CheckboxGroup from './CheckboxGroup';
import RadioGroup from './RadioGroup';
import FormItem from '../FormItem';
import './Input.less';

class Input extends React.PureComponent {
    displayName = 'Input';

    state = {
        _value: this.props.value || ''
    }

    onChange = (e) => {
        const v = e.target.value;
        this.setState({
            _value: v
        });
    }

    onKeyUp = (e) => {
        if (this.props.onKeyUp) { this.props.onKeyUp(e.target.value, e); }
        if (e.keyCode === 13) {
            this.onEnter(e);
        }
    }

    onEnter (e) {
        if (this.props.onEnter) {
            this.props.onEnter(this.input.value, e);
        }
    }

    onBlur = (e) => {
        const v = e.target.value;
        if (this.props.onChange) { this.props.onChange(v, e); }
    }

    clear = () => {
        this.input.value = '';
        this.setState({
            _value: ''
        }, () => {
            if (this.props.onClear) {
                this.props.onClear();
            }
        });
    }

    render () {
        let {className, type, disabled, size, style, clearable,
            prefix, suffix, prefixStyle, suffixStyle, password, append, prepend, enterButton} = this.props;

        let others = filter(this.props, [], ['className', 'style', 'onChange', 'onKeyUp', 'ref', 'suffixStyle']);

        if (type === 'password' && password) {
            return <Passwrod {...this.props}/>;
        }
        if (type === 'search') {
            return <Search {...this.props}/>;
        }
        if (type === 'label') {
            return <Label {...this.props}/>;
        }
        if (type === 'textarea') {
            return <TextArea {...this.props}/>;
        }
        if (type === 'checkbox') {
            return <CheckboxGroup {...this.props}/>;
        }
        if (type === 'radio') {
            return <RadioGroup {...this.props}/>;
        }

        others = filterProps(others);
        
        className = classNames('cm-input-wrapper', className, {
            'cm-input-disabled': disabled,
            [`cm-input-${size}`]: size,
            'cm-input-group': append || prepend,
            'cm-input-group-with-prefix': prefix,
            'cm-input-group-with-suffix': suffix,
            'cm-input-group-with-append': append,
            'cm-input-group-with-prepend': prepend
        });

        const inputStyle = {};
        if (suffixStyle && suffixStyle.width) {
            inputStyle.paddingRight = suffixStyle.width;
        }
        if (prefixStyle && prefixStyle.width) {
            inputStyle.paddingLeft = prefixStyle.width;
        }
        return <div className={className} style={style}>
            {
                prefix ? <div className='cm-input-prefix' style={prefixStyle}>{prefix}</div> : null
            }
            {
                suffix ? <div className='cm-input-suffix' style={suffixStyle}>{suffix}</div> : null
            }
            {
                prepend ? <div className='cm-input-group-prepend'>{prepend}</div> : null
            }
            {
                clearable ? <Icon className='cm-input-clear' name='x-circle' onClick={this.clear}/> : null
            }
            <input ref={f => this.input = f} className='cm-input' {...others} value={this.state._value} 
                onChange={this.onChange} style={inputStyle} onKeyUp={this.onKeyUp} onBlur={this.onBlur}/>
            {
                append ? <div className={`cm-input-group-append ${enterButton ? 'cm-input-search' : ''}`}>{append}</div> : null
            }
        </div>;
    }
}

FormItem.register(Input, ['text', 'password', 'search', 'label']);

export default Input;
